/**
 * @Method draggable
 * @Description TODO
 * @Date 2021/1/22 10:38
 * @Created by HePing
 */
import VeDraggable from 'vuedraggable'
import mixins from '../builder/mixins'

export default {
  name: 'VeFormDrag',
  components: { VeDraggable },
  mixins: [mixins],
  props: {
    dragConfig: {
      type:
        Object, default() {
          return {
            // list: [],
            group: '',
            dragContext: null
          }
        }
    }
  },
  methods: {
    copy(data) {
      this.$emit('copy', data)
    },
    remove(id) {
      this.$emit('remove', id)
    },
    select(id) {
      this.$emit('select', id)
    },
    colClass({ uid }) {
      const current = this.dragConfig.dragContext || {}
      const d = ['dragged-component-item']
      if (current.uid === uid) {
        d.push('dragged-component-active')
      }
      return d
    },
    renderNodes(nodeList, isSubWidget) {
      if (!nodeList || !nodeList.length) return
      const vm = this
      let node
      let colspan
      return nodeList.map(row => {
        if (row.hidden) return ''
        const { uid, name, col, item, widget, subWidgets } = row
        const { tagType, virtualTag, virtualField, on = {} } = widget
        if (tagType === 'PANEL') {
          node = <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })}>
            <ve-draggable className='dragged-component dragged-component-children'
              tag='el-row' list={row.subWidgets} group={vm.dragConfig.group} animation='340'>
              {subWidgets.length ? vm.renderNodes(subWidgets, true) : ''}
            </ve-draggable>
          </ve-component>
        } else if (tagType === 'CUSTOM') {
          colspan = col.span
          node = <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })} />
        } else {
          colspan = col.span
          node = <el-form-item label={item.label} prop={virtualField}>
            <ve-component tag={virtualTag} v-model={vm.formData[virtualField]} config={row} on={vm._on({ on, virtualField })} />
          </el-form-item>
        }
        const colOn = { click: () => vm.select(uid) }
        const copyOn = { click: () => vm.copy(uid, isSubWidget) }
        const removeOn = { click: () => vm.remove(uid) }
        return (
          <el-col class={vm.colClass(row)} span={colspan} style={col.style} nativeOn={colOn}>
            <div class='dragged-component-tips'>{uid}. {name}</div>
            <div class='dragged-component-btns'>
              <div class='dragged-component-copy' on={copyOn}>
                <i class='el-icon-document-copy' />
              </div>
              <div class='dragged-component-delete' on={removeOn}>
                <i class='el-icon-delete' />
              </div>
            </div>
            {node}
          </el-col>
        )
      })
    },
    emptyInfo() {
      return <span class='empty-info'>从左侧拖入或点选组件进行表单设计</span>
    }
  },
  render(h) {
    const vm = this
    const { dragConfig, formData, config, elements } = vm
    const nodes = vm.renderNodes(elements)
    return (
      <ve-form v-model={formData} config={config}>
        <ve-draggable class='dragged-component dragged-component-parent'
          tag='el-row' list={dragConfig.list} group={dragConfig.group} animation='340'>
          {nodes && nodes.length ? nodes : vm.emptyInfo()}
        </ve-draggable>
      </ve-form>
    )
  }
}
